<template>
  <div>
    <div class="search-content">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchContent"
      >
        <el-form-item label="店铺ID：" prop="store_name">
          <el-input
            class="search-content-input"
            v-model="searchContent.store_id"
            placeholder="店铺ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：" prop="store_name">
          <el-input
            class="search-content-input"
            v-model="searchContent.store_name"
            placeholder="店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商名称：" prop="ServiceSuppliersName">
          <el-input
            class="search-content-input"
            v-model="searchContent.ServiceSuppliersName"
            placeholder="供应商名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="督导名称：" prop="followerId">
          <el-select v-model="searchContent.followerId" @change="selectGraderListModel" placeholder="请选择">
            <el-option
              v-for="item in GraderList"
              :key="item.id"
              :label="item.superintendent"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间：" prop="order_time">
          <el-date-picker
            v-model="searchContent.time_start"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间：" prop="order_time">
          <el-date-picker
            v-model="searchContent.time_end"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            clearable
            v-model="searchContent.status"
            placeholder="全部">
            <el-option value="Open" label="开启"></el-option>
            <el-option value="Executing" label="执行中"></el-option>
            <el-option value="Close" label="关闭"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="resetSearchData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="search-list">
      <el-table :data="goodsList" border :height="oHeight" :fit="true">
        <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
        <el-table-column
          align="center"
          prop="ID"
          label="ID"
          min-width="60"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="MerchantName"
          label="店铺名称"
          min-width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="MerchantID"
          label="店铺ID"
          min-width="60"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="follower"
          label="督导"
          min-width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="PurchaseValue"
          label="采购金额"
          min-width="70"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="PurchaseAmount"
          label="购买数量"
          min-width="70"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="SurplusAmount"
          label="剩余数量"
          min-width="70"
        ></el-table-column>
        <el-table-column align="center" label="开始时间" min-width="160">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.ServiceAvailableTime &&
                scope.row.ServiceAvailableTime != ''
              "
              >{{
                (scope.row.ServiceAvailableTime * 1000)
                  | dateFormatter("YYYY-MM-DD")
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间" min-width="160">
          <template slot-scope="scope">
            <span
              v-if="scope.row.ServiceEndTime && scope.row.ServiceEndTime != ''"
              >{{
                (scope.row.ServiceEndTime * 1000)
                  | dateFormatter("YYYY-MM-DD")
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="关闭时间" min-width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.CloseTime && scope.row.CloseTime != ''">{{
              (scope.row.CloseTime * 1000)
                | dateFormatter("YYYY-MM-DD")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ServiceSuppliersName"
          label="供应商"
          min-width="60"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="MerchantID"
          label="收费模式"
          min-width="120"
          #default="{ row }"
        >
          {{ row.charge_mode_mark === "precharge_mode" ? "预充模式" : "" }}
          {{
            row.charge_mode_mark === "effect_charge_mode"
              ? "按效果收费模式"
              : ""
          }}
          {{
            row.charge_mode_mark === "called_deduction"
              ? "呼通计费"
              : ""
          }}
        </el-table-column>
        <el-table-column
          align="center"
          prop="MerchantID"
          label="扣减模式"
          min-width="120"
          #default="{ row }"
        >
          {{ row.balance_deduction_mode === "shared_mode" ? "共享模式" : "" }}
          {{
            row.balance_deduction_mode ===
            "sub_account_independent_deduction_mode"
              ? "子账户独立扣减"
              : ""
          }}
        </el-table-column>
        <el-table-column
          align="center"
          prop="note"
          label="备注"
          min-width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="MerchantID"
          label="状态"
          min-width="60"
          #default="{ row }"
        >
          {{ row.ContractStatus === "Executing" ? "执行中" : "" }}
          {{ row.ContractStatus === "Open" ? "开启" : "" }}
          {{ row.ContractStatus === "Close" ? "关闭" : "" }}
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          prop="isInitiative"
          label="操作"
          min-width="250"
          #default="{ row }"
          v-if="admin_id_arr.includes(admin_id)"
        >
          <div class="button" style="color: #5790bb">
            <span @click="showContent('edit', row)">编辑</span>
            <el-divider direction="vertical"></el-divider>
            <span @click="changeStatus(row, 'Executing')">执行中</span>
            <el-divider direction="vertical"></el-divider>
            <span @click="changeStatus(row, 'Open')">开启</span>
            <el-divider direction="vertical"></el-divider>
            <span @click="changeStatus(row, 'Close')">关闭</span>
          </div>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="btn-group">
          <el-button
            type="primary"
            class="btn-bottom"
            @click="showContent('add')"
            >新增</el-button
          >
          <!-- <el-button type="primary" class="btn-bottom" @click="expertData">导出检索数据</el-button> -->
        </div>
        <!--分页部分-->
        <div class="paginationOne">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total * 1"
          ></el-pagination>
        </div>
      </div>
    </div>
    <edit-drawer ref="editDrawer"></edit-drawer>
  </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import editDrawer from "./show-edit-drawer";
import { dateFormatter, objScreen } from "@/common/js/util";
export default {
  components: { editDrawer },
  data() {
    return {
      goodsList: [],
      oHeight: 800,
      searchContent: {
        currentPage: 1,
        pageSize: localStorage.getItem("pageSize") * 1 || 10,
        time_start: "",
        time_end: "",
        store_id: "",
        store_name: "",
        ServiceSuppliersName: "",
        follower: "",
        followerId: "",
        status: "",
      },
      searchObj: {},
      total: 0,
      GraderList: [], //督导
      admin_id: 0,
      admin_id_arr: [1, 57, 79, 130, 136]
    };
  },
  created() {
    this.admin_id = parseInt(this.$store.getters["user_info"].admin_id)
    this.getListData();
    this.getGraderList();    // 督导
  },
  methods: {
     ///督导
    getGraderList() {
      this.$http
        .post("/admin/store/index.php?act=storeManage&op=getFollowerSelect")
        .then(res => {
          if (res.code == "1") {
            this.GraderList = res.data;
          }
        });
    },
    selectGraderListModel(id){
      const obj = this.GraderList.find(item => item.id === id)
      this.searchContent.follower = obj.superintendent
    },
    showContent(type, row) {
      if (type === "add") {
        this.$refs.editDrawer.show_dialog_fn("add", row);
      } else {
        this.$refs.editDrawer.show_dialog_fn("edit", row);
      }
    },
    changeStatus(row, status) {
      this.$http
        .post(
          "/admin/dataService/index.php?act=merchantSet&op=updateContractStatus",
          {
            ID: row.ID,
            status,
          }
        )
        .then((res) => {
          if (res.code === 1) {
            row.ContractStatus = status;
            this.$message.success(res.msg);
          } else if (res) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getListData() {
      var data = this.searchObj;
      data.currentPage = this.searchContent.currentPage;
      data.eachNum = this.searchContent.pageSize;
      this.$http
        .post(
          "/admin/dataService/index.php?act=merchantSet&op=merchantContractList",
          data
        )
        .then((res) => {
          if (res.code === 1) {
            this.total = res.data.total;
            this.goodsList = res.data.list;
            // this._message('success', res.msg);
            // this.getListData();
          } else {
            this.total = 0;
            this.goodsList = [];
            this._message("error", res.msg);
          }
        })
        .catch((err) => {
          this._message("error", err);
        });
    },
    search() {
      this.searchContent.currentPage = 1;
      let {
        time_start,
        time_end,
        store_id,
        store_name,
        ServiceSuppliersName,
        status,
        follower,
        followerId,
      } = this.searchContent;
      this.searchObj = objScreen({
        startTime: time_start[0],
        endTime: time_start[1],
        over_startTime: time_end[0],
        over_endTime: time_end[1],
        store_id,
        store_name,
        ServiceSuppliersName,
        status,
        follower,
        followerId,
      });
      this.getListData();
    },
    resetSearchData() {
      this.$refs["searchForm"].resetFields();
      this.searchContent = {
        currentPage: 1,
        time_start: [],
        time_end: [],
        pageSize: localStorage.getItem("pageSize") * 1 || 10
      };
      this.searchObj = {};
      this.getListData();
    },
    handleSizeChange(pageSize) {
      localStorage.setItem("pageSize", pageSize);
      this.searchContent.pageSize = pageSize;
      this.searchContent.currentPage = 1;
      this.getListData();
    },
    handleCurrentChange(page) {
      this.searchContent.currentPage = page;
      this.getListData();
    },
  },
  mounted() {
    resize(this);
  },
};
</script>
<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button span { cursor: pointer; }
.search-content-input {
  width: 200px;
}
</style>